<template>
  <div id="echartb7" style="width: 100%; height: 350px"></div>
</template>
  
  <script>
import echarts from "@/utils/lib/echarts";
import { LineChart } from "echarts/charts";
echarts.use([LineChart]);
import { dealElectricity } from "@/utils/index.js";
export default {
  methods: {
    initChart(data) {
      if (!data) {
        return false;
      }
      let getchart = echarts.init(document.getElementById("echartb7"));
      var option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 24, // 字体大小
            align: "left",
          },
          valueFormatter: function (value) {
            return Number(value).toFixed(2) + " 元";
          },
        },
        legend: {
          data: ["去年", "今年", "今年预测"],
          top: "5%",
          textStyle: {
            color: "#000000",
          },
        },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.xaxisData,
          axisTick: {
            //取消刻度线
            show: false,
          },
          // axisLine: {
          //   lineStyle: {
          //     color: "#000000fff",
          //   },
          // },
          axisLabel: {
            show: true,
            formatter: "{value}",
            textStyle: {
              color: "#000000",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000000",
            },
            formatter: "{value}元",
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
              color: "#292F30",
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            data: data.seriesData[1].data,
            name: "去年",
            type: "line",
            smooth: true,
            symbol: "none", // 去除标点
            emphasis: {
              focus: "series",
            },
            areaStyle: {
              normal: {
                color: {
                  //线性渐变
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(52, 236, 255, 0.2)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 134, 254, 0.01)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            color: ["rgba(52, 236, 255, 1)"],
          },
          {
            data: data.seriesData[0].data,
            name: "今年",
            type: "line",
            smooth: true,
            symbol: "none", // 去除标点
            emphasis: {
              focus: "series",
            },
            areaStyle: {
              normal: {
                color: {
                  //线性渐变
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 163, 0.2)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 255, 255, 0.01)", // 100% 处的颜色
                    },
                  ],

                  global: false, // 缺省为 false
                },
              },
            },
            color: ["rgba(0, 255, 163, 1)"],
          },
          {
            data: data.seriesData[2].data,
            name: "今年预测",
            type: "line",
            lineStyle: {
              type: "dashed", // 这里设置为'dashed'或'dotted'
            },
            smooth: true,
            symbol: "none", // 去除标点
            emphasis: {
              focus: "series",
            },
            areaStyle: {
              normal: {
                color: {
                  //线性渐变
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(243, 68, 81, 0.2)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 224, 226, 0.01)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            color: ["rgba(243, 68, 81, 1)"],
          },
        ],
      };
      getchart.setOption(option);
    },
  },
};
</script>
